import { motion } from 'framer-motion'
import type { Variants } from 'framer-motion'
import { useInView } from 'react-intersection-observer'
import { Chrome, BookOpen } from 'lucide-react'
import { Link } from 'react-router-dom'

const Hero = () => {
  const { ref, inView } = useInView({
    triggerOnce: true,
    threshold: 0.2,
  })

  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        duration: 0.8,
        staggerChildren: 0.3,
      },
    },
  }

  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: 'spring', stiffness: 100, damping: 10 },
    },
  }

  const handleDownload = () => {
    window.open('http://hongxiaojiang.com/hongxiaojiang-1.01.zip', '_blank');
  };

  return (
    <section id="home" className="hero-v2">
      <div className="hero-v2-background">
        <div className="bg-decoration"></div>
      </div>

      <div className="hero-container" ref={ref}>
        <motion.div
          className="hero-content-v2"
          variants={containerVariants}
          initial="hidden"
          animate={inView ? 'visible' : 'hidden'}
        >
          <motion.h1 variants={itemVariants} className="hero-v2-title">
            <span className="gradient-text">红小匠·AI</span>
          </motion.h1>

          <motion.h2 variants={itemVariants} className="hero-v2-subtitle">
            0-10万粉丝的AI全周期运营师
          </motion.h2>

          <motion.p variants={itemVariants} className="hero-v2-description">
            智能分析、数据洞察、AI创作，全方位提升您的小红书运营效率，让每一次创作都充满惊喜。
          </motion.p>

          <motion.div variants={itemVariants} className="hero-buttons">
            <button className="btn-aurora" onClick={handleDownload}>
              <Chrome size={18} />
              下载Chrome插件
            </button>
            <Link to="/install-guide" className="btn btn-secondary">
              <BookOpen size={18} />
              安装教程
            </Link>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}

export default Hero 